<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<!-- 添加的form表单 -->
<form class="layui-form" id="addForm" style="display: none;padding: 10px 10px 0 0">
    <div class="layui-form-item">
        <label class="layui-form-label">图书名字</label>
        <div class="layui-input-inline">
            <input type="text" name="bookName" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图书价格</label>
        <div class="layui-input-inline">
            <input type="text" name="dangorice" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发布时间</label>
        <div class="layui-input-inline">
            <input type="text" name="groundingDate" placeholder="请输入" autocomplete="off" id="timeId" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">存货清单</label>
        <div class="layui-input-inline">
            <input type="text" name="inventory" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">作者</label>
        <div class="layui-input-inline">
            <input type="text" name="author" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">出版社</label>
        <div class="layui-input-inline">
            <input type="text" name="press" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">销售数量</label>
        <div class="layui-input-inline">
            <input type="text" name="salenum" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图书图片</label>
        <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
    </div>
    <input id="img" type="hidden" name="productImage">
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">图书类别</label>
        <div class="layui-input-block">
            <%--下拉列表框--%>
            <select name="cId" id="deptId">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<%--修改的form表单--%>
<form class="layui-form" id="updaForm" lay-filter="updaForm" style="display: none;padding: 10px 10px 0 0">

    <div class="layui-form-item">
        <label class="layui-form-label">图书名字</label>
        <div class="layui-input-inline">
            <input type="text" name="bookName" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <input type="hidden" name="bookId">
    <div class="layui-form-item">
        <label class="layui-form-label">图书价格</label>
        <div class="layui-input-inline">
            <input type="text" name="dangorice" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发布时间</label>
        <div class="layui-input-inline">
            <input type="text" name="groundingDate" placeholder="请输入" autocomplete="off" id="timeId1" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">存货清单</label>
        <div class="layui-input-inline">
            <input type="text" name="inventory" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">作者</label>
        <div class="layui-input-inline">
            <input type="text" name="author" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">出版社</label>
        <div class="layui-input-inline">
            <input type="text" name="press" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">销售数量</label>
        <div class="layui-input-inline">
            <input type="text" name="salenum" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图书图片</label>
        <button type="button" class="layui-btn" id="test2">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">图书类别</label>
        <div class="layui-input-block">
            <%--下拉列表框--%>
            <select name="cId" id="deptId2">
            </select>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">图书展示图片</label>
        <div class="layui-input-block">
            <img src="" name="productImage" id="imgId">
        </div>
    </div>
    <input type="hidden" name="productImage" id="imgId2">

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="go">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>



<div>
    <button class="layui-btn layui-btn-danger" id="del">批量删除</button>
    <button class="layui-btn" id="addBtn">添加</button>
</div>

<table id="demo" lay-filter="myTableFilter"></table>

<script type="text/html" id="toolbar1">
    <a class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" lay-event="test1">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="test2">修改</a>
</script>

<script>
    layui.use(['table', 'form', 'layer', 'laydate','upload'], function () {
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        //第一个实例
        table.render({
            elem: '#demo'
            , url: 'prods' //数据接口
            , page: true //开启分页
            , height: 500
            ,limit:5
            ,limits:[5,10,15,20,25]
            , cols: [[ //表头
                {type:"checkbox",fixed:"left"}
                ,{field: 'bookId', title: '图书编号'}
                , {field: 'bookName', title: '图书名字'}
                , {field: 'dangorice', title: '图书当当价格'}
                , {field: 'groundingDate', title: '发布时间'}
                , {field: 'inventory', title: '存货清单'}
                , {field: 'author', title: '作者'}
                , {field: 'press', title: '出版社'}
                , {field: 'salenum', title: '销售数量'}
                , {field: 'productImage', title: '图书图片',templet:function (d) {
                        return "<img src='productImages/"+d.productImage+"'>";
                    }}
                , {title: '操作', toolbar: '#toolbar1'}
            ]]
        });


        table.on('tool(myTableFilter)', function (obj) {
    //-----------------------------------删除-----------------------------------------------
            if (obj.event == 'test1') {
                layer.confirm('确定删除这本图书？',function () {
                    $.ajax({
                        url: "deleteId/"+obj.data.bookId,
                        type: "DELETE",
                        dataType: "JSON",
                        success: function () {
                            layer.closeAll();
                            table.reload("demo");
                            layui.msg("删除成功");
                        }
                    })
                })
            } else if (obj.event == 'test2') {
                //----------------------------下拉框渲染-----------------------------------------
                $.ajax({
                    url:"cates",
                    type:"GET",
                    dataType:"json",
                    success:function (res) {
                        var html = "";
                        console.log(res.data.length)
                        for(var i = 0;i < res.data.length; i++ ){
                            if (res.data[i].cid>7){
                                html += "<option value='"+res.data[i].cid+"'>"+res.data[i].categoryName+"</option>";
                            }

                        }
                        $("#deptId2").html(html);
                        form.render("select");
                    }
                })


      //-----------------------------------修改-----------------------------------------------
                layer.open({
                    type: 1,
                    content: $("#updaForm"),
                    area: ['600px', '600px'],
                    title: '修改'
                })
                $("#imgId").prop("src","productImages/"+obj.data.productImage);
                form.val("updaForm",obj.data)
                console.log(obj.data);


            }
            form.on('submit(go)', function (data) {
                var field = data.field;
                console.log(field)

                $.ajax({
                    url: "update",
                    data: JSON.stringify(field),
                    contentType: "application/json",
                    type: "POST",
                    success: function (res) {
                        table.reload("demo");
                        layer.closeAll();
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        })

  //---------------------------修改文件上传-------------------------------
        var uploadInst = upload.render({
            elem: '#test2' //绑定元素
            ,url: 'upload/' //上传接口
            ,type: "POST"
            ,done: function(res){
                $("#imgId").prop("src","productImages/"+res.msg);
                $("#imgId2").val(res.msg);
            }
        });

   //---------------------------批量删除--------------------------------------

        $("#del").click(function () {
            let checkStatus = table.checkStatus("demo");
            var jsonArray = [];

            if(checkStatus.data.length != 0){
                for (var i = 0;i<checkStatus.data.length;i++){
                    jsonArray.push(checkStatus.data[i].bookId);
                }
            }else{
                layer.msg("请选中行！！！")
            }
            console.log(jsonArray)
            layer.confirm('确定删除这本图书？',function () {
                $.ajax({
                    url:"deleteIds",
                    data:JSON.stringify(jsonArray),
                    contentType:"application/json",
                    type:"DELETE",
                    success:function (res) {
                        layer.closeAll();
                        table.reload("demo");
                        layui.msg("删除成功!!!");
                    }
                })
            })


        })
//---------------------------添加文件上传-------------------------------
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: 'upload/' //上传接口
            ,type: "POST"
            ,done: function(res){
                console.log(res.msg)
                $("#img").val(res.msg)


            }
        });


        $("#addBtn").click(function () {
            //----------------------------下拉框渲染-----------------------------------------
                $.ajax({
                    url:"cates",
                    type:"GET",
                    dataType:"json",
                    success:function (res) {
                        var html = "";
                        console.log(res.data.length)
                        for(var i = 0;i < res.data.length; i++ ){
                            if (res.data[i].cid>7){
                                html += "<option value='"+res.data[i].cid+"'>"+res.data[i].categoryName+"</option>";
                            }

                        }
                        $("#deptId").html(html);
                        form.render("select");
                    }
                })


            layer.open({
                type: 1,
                content: $("#addForm"),
                area: ['600px', '600px'],
                title: '添加'
            })
            form.on('submit(addSubmit)', function (data) {
                var json = data.field;
                $.ajax({
                    url: "prods",
                    type: "POST",
                    data: JSON.stringify(json),
                    contentType: "application/json",
                    success: function () {
                        table.reload("demo");
                        layer.closeAll();
                    }
                })
                return false;
            })

        })
        laydate.render({
            elem: '#timeId' //指定元素
        });

    });

</script>

</body>
</html>